<template>
  <div class="page">
    <div class="van-nav-head">
      <van-nav-bar title="混合验证" left-arrow @click-left="$router.go(-1)" :fixed="true"/>
    </div>
    <div class="padding">
      <div class="form-box">
        <van-field v-model="formData.username" placeholder="请输入真实姓名" label="姓名"/>

        <van-field v-model="formData.address"
                   @click="showArea=true"
                   placeholder="请选择地址"
                   type="text" readonly
                   right-icon="arrow"
                   label="地址"/>

        <van-field v-model="formData.addrdetails" placeholder="请输入地址详情" label="地址详情"/>

        <!-- 联系方式 -->
        <van-field v-model="formData.contact" placeholder="qq号微信号手机号均可" type="text" label="联系方式"/>
      </div>

      <div class="form-feedback">
        <textarea name="" v-model="formData.brief" placeholder="你想说点什么"></textarea>
        <div class="padding-top-xs">
          <van-uploader v-model="formData.fileList" max-count="4" :after-read="afterRead"/>
        </div>
      </div>
      <div class="padding-tb-lg">
        <van-button block type="info" @click="onSubmit">
          提交
        </van-button>
      </div>
    </div>

    <!--    地址选择-->
    <van-popup v-model="showArea" position="bottom">
      <van-area
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="showArea = false"
      />
    </van-popup>
  </div>
</template>

<script type="es6">

let validator = {
  "username": {
    name: "姓名",
    required: {msg: "请输入真实姓名"},
    type: "userName",
  },
  "address": {
    name: "地址",
    required: {msg: "请选择地址"},
  },
  "addrdetails": {
    name: "地址详情",
    required: false,
    minLength: 2,
  },
  "contact": {
    name: "联系方式",
    type: "qqNum|wxNum|phone"
  },
  "brief": {
    name: "留言",
    pattern: {
      value:  /^[\u4e00-\u9fa5_a-zA-Z0-9\s\,\.\，\。\(\)\?《？》]+$/,
      msg: "留言不能有特殊字符"
    }
  },
  "fileList": {
    name: "图片",
    callback: function (data) {
      if (data.fileList.length < 1) {
        return "请上传图片";
      } else if (data.fileList.length < 2) {
        return "图片至少上传两张";
      }
      return false;
    }
  }
}

import areaList from "../../../assets/js/area.js"

export default {
  name: "",
  components: {},
  data() {
    return {
      showArea: false,
      areaList,
      showPass: false,
      showPassok: false,
      formData: {
        "username": "ok-mini",
        "address": "北京市-北京市-东城区",
        "addrdetails": "",
        "contact": "12312312",
        "brief": "",  //说点什么
        "fileList": [], //图片
      }
    };
  },
  mounted() {
  },
  methods: {
    onSubmit() {
      let formData = this.formData;
      let self = this;
      let bool = this.$utils.formValidator(formData, validator, self);
      if (bool) {
        this.$toast.error(bool.msg);
      } else {
        this.$dialog.alert({
          title: 'ok-mini 表单验证',
          message: JSON.stringify(formData),
        });
      }
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    onConfirm(e) {
      let address = e.map((item) => item.name);
      this.showArea = false;
      this.formData.address = address.join("-");
    },
    onShowPass(type) {
      if ("password" == type) {
        this.showPass = !this.showPass;
      } else if ("passwordok" == type) {
        this.showPassok = !this.showPassok;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: #FFFFFF;
}

.form-feedback {
  margin-top: 20px;
  border-radius: 10px;
  padding: 10px;
  overflow: hidden;
  background: #F8F9FD;

  textarea {
    border: 0;
    height: 72px;
    width: 100%;
    max-width: none;
    display: block;
    resize: none;
    background: transparent;
  }

  ::v-deep {
    .van-uploader__preview-image,
    .van-uploader__upload {
      width: 64px;
      height: 64px;
    }

    .van-uploader__upload {
      box-shadow: 0 0 1px #000;
    }
  }
}

.form-box {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 5px #eee;
}
</style>